<template>
 <div>
   <head-components></head-components>
   <div class="flex px-30 h-100 mt-20">
    <div style="width:180px; min-height:800px" class="border-right h-100">
      <div
        class="flex flex-column align-center mt-20 f16"
        v-for="(item, index) in sidebar" :key="index">
          <p class="cp w-100 flex align-center justify-center"
            style="height:40px"
            @click="isShow = index"
            :class="index === isShow? 'active': ''">
            <Icon :type="item.icon"></Icon>
            {{ item.label }}
          </p>
      </div>
    </div>
    <div class="flex-1 h-100 ml-20">
      <commodity-management v-if="isShow === 0"></commodity-management>
      <sort-management v-if="isShow === 1"></sort-management>
      <order-management v-if="isShow === 2"></order-management>
      <user-info v-if="isShow === 3"></user-info>
    </div>
   </div>
 </div>
</template>
<script>
import headComponents from '@/components/headComponents.vue'
import commodityManagement from './components/commodityManagement.vue'
import sortManagement from './components/sortManagement.vue'
import orderManagement from './components/orderManagement.vue'
import userInfo from './components/userInfo.vue'
export default {
  components: { 
    headComponents,
    commodityManagement,
    sortManagement,
    orderManagement,
    userInfo
  },
  data () {
    return {
      isShow: 0, // 切换
      sidebar: [
        {
          label: '商品管理',
          icon: 'ios-cube'
        },
        {
          label: '分类管理',
          icon: 'ios-list'
        },
        {
          label: '订单管理',
          icon: 'md-reorder'
        },
        {
          label: '个人中心',
          icon: 'ios-contact'
        }
      ]
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {

  },
}
</script>
<style lang='less' scoped>
.active{
  background: rgba(133, 178, 247, 0.4);
}
</style>